<template>
  <el-image ref="imageRef" fit="cover" class="sea-album" style="float: left"
            src="/img/head_01.png" :preview-src-list="album.urls" :initial-index="album.index"/>
</template>

<script setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import Eventbus from "@/lang/eventbus/index";

// Reference
const imageRef = ref();

// 全局相册
const album = reactive({
    // 图片列表
    urls: [],
    // 打开第几个
    index: 0,
});

/**
 * 打开相册
 *
 * 相册全局统一封装，使用统一的 API 打开相册。
 *
 * 主推方式：使用原生的 img，如果需要展开相册，则通过当前函数触发。
 * 存在一个优势：可以在任何事件中展开相册，而不是通过图片的点击事件。
 *
 * element-ui 会在 dom 组件中动态添加相册，功能上没什么问题；
 * 只是感觉上，一个全局的组件，就应当以全局的方式进行处理。
 *
 * @param opts {{urls: [string], index: number}}  图片列表
 */
const openAlbum = (opts) => {
    album.urls = opts.urls;
    album.index = opts.index;
    imageRef.value.$el.querySelector('img').click();
}

// 注册全局相册事件
onMounted(()=>{
    Eventbus.registryAlbum(openAlbum);
})

/**
 * 组件销毁生命周期
 */
onUnmounted(() => {
    // 销毁相册事件
    Eventbus.unregisterAlbum(openAlbum);
});
</script>

<style lang="scss" scoped>
.sea-album {
    height: 0;
    margin: 0;
    padding: 0;

    > img {
        display: none;
    }
}
</style>